<template>
  <div class="list-table">
    <el-form ref="form" label-width="120px" class="dataForm" style="left: 20px;right:5px;">
      <!-- 基金收益列表 -->
      <div class="area-header" style="margin-top: 10px;">
        <span class="area-header-title">{{ $t('扣除费用列表') }}</span>
      </div>
      <el-table ref="multipleTable" v-loading="loading" :data="fundExpenseList" :row-key="getRowKey" tooltip-effect="dark" border @selection-change="getCheckedData">
        <el-table-column
          v-model="checkedChange"
          reserve-selection
          type="selection"
          width="55"
        />
        <el-table-column :label="$t('申请标题')" align="center" prop="actTitle" :show-overflow-tooltip="true" />
        <el-table-column :label="$t('申请时间')" align="center" prop="applyTime" show-overflow-tooltip width="110">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.applyTime) }}</span>
          </template>
        </el-table-column>
        <!--<el-table-column label="部门" align="center" prop="departmentName" />-->
        <el-table-column :label="$t('费用金额(元)')" header-align="center" align="right" prop="amountMoney" show-overflow-tooltip width="110">
          <template slot-scope="scope">
            <span class="money-text">{{ moneyFormat(scope.row.amountMoney) }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('费用类型')" align="center" prop="typesFee" show-overflow-tooltip :formatter="typesFeeFormat" />
        <el-table-column :label="$t('费用明细')" align="center" prop="costsThat" show-overflow-tooltip />
      </el-table>
    </el-form>
    <div slot="footer" class="dialog-footer" style="text-align: right;">
      <!--保存，保存并启动流程，取消 三个按钮-->
      <el-button @click="cancel">{{ $t("取消") }}</el-button>
      <el-button type="primary" @click="confirmChecked">{{ $t('确认') }}</el-button>
    </div>
  </div>
</template>

<script>
  import { listFundExpense } from '@/api/fund/expense/fundExpense'

export default {
  data() {
    return {
      // 变更历史遮罩层
      loading: true,
      // 对比遮罩层
      loadingVS: false,
      // 查询参数
      queryParams: {
        fundId: this.$route.query.id,
        whetherLp: 'N'
      },
      // 基金收益表格数据
      fundExpenseList: [],
      // 选中的ID
      checkedChange: [],
      parentList: [],
      typesFeeOptions: [],
      // 选中的对象
      checkedObj: [],
      // 回显的对象
      checkedList: []
    }
  },
  created() {
    this.getDicts('fund_expense_type_fee').then(response => {
      this.typesFeeOptions = response.data
    })
    this.getList()
  },
  methods: {
    /** 查询股东信息列表 */
    getList() {
      this.loading = true
      listFundExpense(this.queryParams).then(response => {
        this.fundExpenseList = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    getFundExpenseList(list) {
      this.$refs.multipleTable.clearSelection()
      this.parentList = []
      this.checkedObj = []
      listFundExpense(this.queryParams).then(response => {
        this.fundExpenseList = response.rows
        this.checkedList = []
        this.parentList = list
        this.checkedChange = []
        console.log(list)
        // this.$nextTick(() => {
        //   list && list.forEach(item => {
        //     let idx = 0
        //     this.fundExpenseList.forEach(dd => {
        //       if (item.expenseId === dd.id) {
        //         this.checkedList.push(item)
        //         this.$refs.multipleTable.toggleRowSelection(this.fundExpenseList[idx], true)
        //       }
        //       idx++
        //     })
        //   })
        // })
        this.total = response.total
        this.loading = false
      })
    },
    typesFeeFormat(row) {
      return this.selectDictLabel(this.typesFeeOptions, row.typesFee)
    },
    // 获取rowKey
    getRowKey(row) {
      return row.id
    },
    // 根据选中的ID，展示对比信息
    getCheckedData(val) {
      this.checkedObj = []
      if (val !== null && val !== undefined) {
        val.forEach(item => {
          if (item !== undefined) {
            var row = {
              // 费用ID
              expenseId: item.id,
              // 申请标题
              actTitle: item.actTitle,
              // 申请时间
              applyTime: item.applyTime,
              // 费用金额
              amountMoney: item.amountMoney,
              // 费用类型
              typesFee: item.typesFee,
              // 费用明细
              costsThat: item.costsThat
            }
            this.checkedObj.push(row)
          }
        })
      }
    },

    // 点击确认，将选中的收益数据回显到基金分配页面
    confirmChecked() {
      if (this.checkedObj === [] || this.checkedObj.length === 0) {
        this.msgError(this.$t('请选择收益！'))
        return
      }
      var fundExpenseList = []
      this.checkedObj.forEach(item => {
        this.checkedList.forEach(deal => {
          if (deal.id !== item.id) {
            fundExpenseList.push(item)
          } else {
            fundExpenseList.push(deal)
          }
        })
      })
      var idListStr = ''
      this.parentList.forEach(item => {
        idListStr = idListStr + item.expenseId + ','
      })
      if (fundExpenseList === []) {
        this.$parent.$parent.form.fundExpenseList = fundExpenseList
      } else {
        this.checkedObj.forEach(item => {
          if (idListStr.lastIndexOf(item.expenseId) === -1) {
            this.$parent.$parent.form.fundExpenseList.push(item)
          }
        })
      }
      this.$parent.$parent.getAllocationSum()
      this.$parent.$parent.expenseOpen = false
    },
    // 取消按钮
    cancel() {
      this.$parent.$parent.expenseOpen = false
    }
  }
}
</script>
